<template>
  <div class="datial">
    <!-- 头部组件 -->
    <van-sticky>
      <myhead>
        <template #center>传智播客：黑马程序员</template>
      </myhead>

      <div class="nav">
        <span @click="$router.go(-1)">
          <i class="van-icon van-icon-arrow-left"></i>
          返回</span
        >
        <span>资讯详情</span>
        <span></span>
      </div>
    </van-sticky>
    <!-- 图文详情 -->
    <div class="details">
      <h2>{{ details.title }}</h2>
      <p class="info">
        <span>{{ details.add_time && details.add_time.split("T", 1)[0] }}</span
        >&nbsp;&nbsp;&nbsp;&nbsp;
        <span> {{ details.click }} 次浏览</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span> 分类：{{ details.category }}</span
        >&nbsp;&nbsp;&nbsp;&nbsp;
      </p>
      <hr />
      <div class="content" v-html="details.content"></div>
    </div>
    <!-- 评论组件 -->
    <comment :artid="$route.params.id"></comment>>
  </div>
</template>

<script>
import myhead from "../../components/myhead.vue";
import comment from "../../components/Comment.vue";
import { getNewsDetial } from "../../apis/news";
export default {
  components: { myhead, comment },
  data() {
    return {
      details: {},
     
    };
  },
  async mounted() {
   let newid = this.$route.params.id;

    // console.log(this.newid);
    let res = await getNewsDetial(newid);
    // console.log(res);
    this.details = res.data.message[0];
    console.log(this.details);
  },
};
</script>

<style lang="less" scoped>
.details {
  padding: 0px 6px;
  h2 {
    width: 100%;
    color: #1980c3;
  }
  .info {
    font-size: 14px;
    color: #c9c8c6;
    padding: 0px 10px 25px 10px;
  }
  hr {
    background-color: #c9c8c6;
    border: none;
    height: 1px;
  }
  .content {
    line-height: 28px;
    font-size: 16px;
    padding-bottom: 80px;
    color: #7d7f7e;
    width: 100%;
    /deep/b {
      display: block;
      font-weight: 700;
      color: #323133;
      font-size: 17px;
      margin: 6px 0px;
    }
    /deep/p > img {
      width: 100%;
      margin-left: -2em;
    }
    /deep/ p {
      text-indent: 2em;
    }
  }
}

.nav {
  display: flex;
  height: 50px;
  padding: 0px 10px;
  background-color: #f7f7f7;
  justify-content: space-between;
  align-items: center;
  color: #26a2ff;
  font-size: 24px;
}
</style>